<template>
	<view class="container">
		<view class="header">名师推荐</view>
		<scroll-view class="teachers-list" scroll-x>
			<view v-for="(teacher, index) in teachers" :key="index" class="teacher-item" @click="goToTeacherDetail(teacher)">
				<image :src="teacher.avatar" mode="aspectFill"></image>
				<text>{{ teacher.name }}</text>
			</view>
		</scroll-view>
		<view class="header">名师指导课程</view>
		<view class="item" @click="handleClick(item)" v-for="(item, index) in list" :key="index">
			<image class="item-image" :src="item.image"></image>
			<view class="item-1">
				<text class="item-text">{{ item.text }}</text>
				<view class=" item-price">
					<text class="item-details">{{ item.details}}</text>
					<text class="item-jiage">{{ item.price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: '/static/image/软件技术.png',
						text: 'MySQL基础入门–mysql数据库实战教程',
						details: '老师指导-小美',
						price: '预约'
					},
					{
						image: '/static/image/python.png',
						text: '如何培养自己深度思考的习惯，找到一条合适自己的学习方法',
						details: '老师指导-杰克',
						price: '预约'
					},
					{
						image: '/static/image/c语言.png',
						text: '考前30天如何有效冲刺，进入名校不是梦',
						details: '老师指导-rose',
						price: '预约'
					},
					{
						image: '/static/image/uniapp.png',
						text: 'MySQL基础入门–mysql数据库实战教程',
						details: '老师指导-Jazz',
						price: '预约'
					},
					{
						image: '/static/image/mysql.png',
						text: 'MySQL基础入门–mysql数据库实战教程',
						details: '老师指导-玛瑞',
						price: '预约'
					},
				],
				teachers: [
				        { name: '小美', avatar: '/static/teacher/1.png' },
				        { name: 'rose', avatar: '/static/teacher/2.png' },
				        { name: 'Jazz', avatar: '/static/teacher/3.png' },
				        { name: '玛瑞', avatar: '/static/teacher/4.png' },
				        { name: '小玲', avatar: '/static/teacher/5.png' },
						{ name: '杰克', avatar: '/static/teacher/6.png' },
				      ]
			};
		},
		methods: {
			handleClick(item) {
				console.log('Clicked:', item);
			},
			goToTeacherDetail(teacher){
				uni.navigateTo({
					url: `/pages/teacher/teacher?avatar=${encodeURIComponent(teacher.avatar)}&name=${encodeURIComponent(teacher.name)}`
				})
			},
		},
	};
</script>

<style>
	.container {
		height: 500px;
		/* background: linear-gradient(to top, whitesmoke, lightcyan); */
	}
	.header {
	  padding: 10px;
	  font-size: 20px;
	}
	
	.teachers-list {
	  display: flex;
	  /* align-items: center; */
	  white-space: nowrap; /* 防止换行 */
	  padding: 10px;
	}
	
	.teacher-item {
	  margin-right: 20px;
	  display: inline-flex;
	  flex-direction: column;
	  align-items: center;
	  width: 80px;
	}
	
	.teacher-item image {
	  width: 60px;
	  height: 60px;
	  border-radius: 50%;
	  margin-bottom: 5px;
	}
	
	.teacher-item text {
	  font-size: 16px;
	}
	.item {
		display: flex;
		align-items: center;
		background-color: white;
		margin-top: 10rpx;
		margin-right: 10rpx;
		margin-left: 10rpx;
		width: 97%;
		height: 130px;
		border-radius: 2px;
	}

	.item-image {
		width: 150px;
		height: 110px;
		border-radius: 8px;
	}

	.item-1 {
		flex: 1;
		padding: 20px;
	}
	.item-text {
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}

	.item-teacher {
		color: gray;
	}

	.item-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}

	.item-details {
		border-radius: 5rpx;
		font-size: 14px;
		width: 100px;
		color: gray;
	}

	.item-jiage {
		color: skyblue;
		border: 1px solid skyblue;
		width: 50px;
		text-align: center;
		border-radius: 40px;
	}
</style>